import React, { useEffect, useState, useMemo } from 'react';
import { Row, Col, Progress } from 'antd'
import 'echarts-gl'
import moment from "moment";
import AMapLoader from '@amap/amap-jsapi-loader';
import {Get, Url} from "../../server/http";
import { getVolumeByMB, getVolume, cpy } from "../../utils/cmn";
import Header from './Header'
import dianjunjie from '../../utils/cities/dianjunjie.json'
import aijia from '../../utils/cities/aijiazhen.json'
import qiaobian from '../../utils/cities/qiaobianzhen.json'
import lianpeng from '../../utils/cities/lianpengxiang.json'
import tucheng from '../../utils/cities/tuchengxiang.json'
import './index.less'


const mapKey = '3d944fa68cc341b006493f43d96bb16a';
const switchInterval = 5000;  // 切换类型时间间隔(ms)

let dataTimer = null;       // 数据更新计时器
let switchTimer = null;     // 数据切换计时器 负责切换类型及区域
let globalUsageList = {};   // 记录全局数据
let mapObj = null;  // AMap对象
let map = null;     // 创建的地图实例
let flag = false;   // 第一次获取数据时开启一次窗口 后续窗口由切换区域开启

const Screen = () => {
	const [list, setList] = useState([])
	const [viewList, setViewList] = useState([])
	const [item, setItem] = useState({})
	const [topType, setTopType] = useState(0)      // TOP5资源类型

	useEffect(() => {
		initMap()

		return () => {
			if (switchTimer !== null) {
				clearTimeout(switchTimer);
				switchTimer = null;
			}
			if (dataTimer !== null) {
				clearInterval(dataTimer);
				dataTimer = null;
			}
			globalUsageList = {};
			mapObj = null;  // AMap对象
			map = null;     // 创建的地图实例
			flag = false;
		}
	}, [])

	// 初始化地图
	const initMap = () => {
		AMapLoader.load({
			"key": mapKey,              // 申请好的Web端开发者Key，首次调用 load 时必填
			"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			"plugins": ['AMap.GeoJSON'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			"AMapUI": {             // 是否加载 AMapUI，缺省不加载
				"version": '1.1',   // AMapUI 缺省 1.1
				"plugins":[],       // 需要加载的 AMapUI ui插件
			},
			"Loca":{                // 是否加载 Loca， 缺省不加载
				"version": '2.0.0'  // Loca 版本，缺省 1.3.2
			},
		}).then((AMap)=>{
			mapObj = AMap;
			// getAllArea();
			creatMap();
		}).catch(e => {
			console.log(e);
		})
	}

	// 创建地图
	const creatMap = () => {
		map = new mapObj.Map('china-map', {
			zoom: 12.1,
			resizeEnable: true,
			pitch: 45,
			center: [111.169233, 30.662411],
			showBuildingBlock: true,
			showLabel: false,
			zoomEnable: false,   //是否缩放
			dragEnable: false,  //是否拖动
			mapStyle: "amap://styles/7049faf9a31244784b3c15dcf5c1f30d",
		});


		let dianjunGeo = new mapObj.GeoJSON({
			geoJSON: dianjunjie,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#514dc7'
				});
			}
		});
		let aijiaGeo = new mapObj.GeoJSON({
			geoJSON: aijia,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#314dc7'
				});
			}
		});
		let qiaobianGeo = new mapObj.GeoJSON({
			geoJSON: qiaobian,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#814dc7'
				});
			}
		});
		let lianpengGeo = new mapObj.GeoJSON({
			geoJSON: lianpeng,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#114dc7'
				});
			}
		});
		let tuchengGeo = new mapObj.GeoJSON({
			geoJSON: tucheng,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#b14dc7'
				});
			}
		});
		dianjunGeo.on('click', ()=>openWindow({lng: 111.26504,lat: 30.692347, title: '点军街道'}))
		// dianjunGeo.on('mouseout', closeWindow)
		aijiaGeo.on('click', ()=>openWindow({lng: 111.348243, lat: 30.619624, title: '艾家镇'}))
		// aijiaGeo.on('mouseout', closeWindow)
		qiaobianGeo.on('click', ()=>openWindow({lng: 111.190692, lat: 30.679323, title: '桥边镇'}))
		// qiaobianGeo.on('mouseout', closeWindow)
		lianpengGeo.on('click', ()=>openWindow({lng: 111.248689,lat: 30.63855, title: '联棚乡'}))
		// lianpengGeo.on('mouseout', closeWindow)
		tuchengGeo.on('click', ()=>openWindow({lng: 111.113354,lat: 30.653744, title: '土城乡'}))
		// tuchengGeo.on('mouseout', closeWindow)

		// mouseover mouseout
		map.add(dianjunGeo);
		map.add(aijiaGeo);
		map.add(qiaobianGeo);
		map.add(lianpengGeo);
		map.add(tuchengGeo);

		// 111.268689,30.64855

		const list = [
			{lng: 111.348243,lat: 30.619624},
			{lng: 111.190692,lat: 30.679323},
			{lng: 111.113354,lat: 30.653744},
			{},
		]
	}

	// 关闭区域信息窗口
	const closeWindow = () => {
		map.clearInfoWindow();
	}

	// 打开区域信息窗口
	const openWindow = (data, info) => {
		if (mapObj === null || map === null) {
			return ;
		}
		if (!data || !data['lng'] || !data['lat'])  {
			return ;
		}
		map.clearInfoWindow();
		let content = [];
		content.push(`<div style="font-size:16px;color:white;margin-left: 10px;height: 10px;">${data['title']}</div>`);
		content.push(`<span style="font-size:13px;color:white;margin-left: 10px;">行政村数&nbsp;&nbsp;&nbsp;&nbsp;</span>`);
		content.push(`<span style="font-size:13px;color:white;margin-left: 10px;">农户数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>`);
		content.push(`<span style="font-size:13px;color:white;margin-left: 10px;">集体组织成员数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>`);
		// content.push(`<span style="font-size:13px;color:white;margin-left: 10px;">虚拟机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${info}</span>`);
		let infoWindow = new mapObj.InfoWindow({
			isCustom: true,  //使用自定义窗体
			content: createInfoWindow(content.join("<br/>")),
			offset: new mapObj.Pixel(43, 0),
		});
		infoWindow.open(map, new mapObj.LngLat(data['lng'], data['lat']));
	}

	// 创建窗体
	const createInfoWindow = (content) => {
		let info = document.createElement("div");
		info.className = "content-window-card";

		//可以通过下面的方式修改自定义窗体的宽高
		info.style.width = "250px";
		info.style.height = "150px";
		// 定义中部内容
		let middle = document.createElement("div");
		middle.className = "info-middle";
		middle.innerHTML = content;
		info.appendChild(middle);

		return info;
	}



	// header高7vh
	return (
		<div className={'full-screen'}>
			<Header />
			<div className={'map-warp'}>
				<div id={'china-map'} className={'chinaMap'}/>
			</div>
		</div>
	);
};

export default Screen;
